<template>
  <BoTable
    :columns="columns"
    :request="fetchList"
    ref="tableRef"
    row-key="id"
    :show-index="true"
  >
  </BoTable>
  <!-- 处理弹窗 -->
  <FormModal :columns="item"> </FormModal>
</template>
<route lang="json">
{
  "name": "alarm-list",
  "meta": {
    "title": "告警列表"
  }
}
</route>
<script setup lang="tsx">
import { computed, ref } from 'vue';
import { useFormModal } from '@boeyo/hooks';
import { useDicts } from '@boeyo/portal';
import { listToEnum, listToOption } from '@boeyo/shared';
import { BoFormProps, BoTable, BoTableProps } from '@boeyo/ui';
import { getAlarmList, getRoleGroupSelectList, handleAlarm } from './api';

const fetchList = async (params) => {
  const res: any = await getAlarmList(params);
  res.rows = res.rows.map((item) => {
    if (item.alarmType !== '1') {
      item.handleState = '';
    }
    return item;
  });
  return res;
};

const tableRef = ref();

const dictArr = ['alarm_type', 'handle_status', 'alarm_methods', 'false_alarm'];
const { alarmTypeEnum, handleStatusEnum, alarmMethodsEnum, falseAlarmOptions } =
  useDicts(dictArr);

// 获取通知组信息
const noticeGroupOptions = ref([]);
const noticeGroupEnum = ref({});

const fetchNoticeGroupList = async () => {
  const res: any = await getRoleGroupSelectList();
  noticeGroupOptions.value = listToOption(res.data, 'groupName', 'id');
  noticeGroupEnum.value = listToEnum(res.data, 'groupName', 'id');
};
fetchNoticeGroupList();

const columns = computed<BoTableProps['columns']>(() => [
  {
    title: '告警时间',
    dataIndex: 'alarmTime',
    hideInSearch: true,
  },
  {
    title: '告警类型',
    dataIndex: 'alarmType',
    valueType: 'status',
    valueEnum: alarmTypeEnum.value,
  },
  {
    title: '所属监测阵',
    dataIndex: 'structureName',
  },
  {
    title: '触发告警测点',
    dataIndex: 'pointName',
  },
  {
    title: '告警方式',
    dataIndex: 'noticeMethod',
    hideInSearch: true,
    customRender({ record }) {
      return record.noticeMethod
        ?.split(',')
        .map((item) => alarmMethodsEnum.value[item]?.text)
        ?.join();
    },
  },
  {
    title: '通知组',
    dataIndex: 'noticeGroup',
    hideInSearch: true,
    customRender({ record }) {
      return record.noticeGroup
        ?.split(',')
        .map((item) => noticeGroupEnum.value[item]?.text)
        ?.join();
    },
  },
  {
    title: '处理状态',
    dataIndex: 'handleState',
    hideInSearch: true,
    valueEnum: handleStatusEnum.value,
    valueType: 'status',
  },
  {
    title: '处理时间',
    dataIndex: 'handleTime',
    hideInSearch: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    actions({ record }) {
      return [
        {
          text: '详情',
          hidden: record.alarmType !== '1',
          onClick(record) {
            onView(record);
          },
        },
      ];
    },
  },
]);
const onView = (record) => {
  open({
    title: (type) => (type === 'info' ? '详情' : '处理'),
    modalType: 'info',
    request: async (params: any) => {
      const { isFalseAlarm, handleDesc, id } = params;
      await handleAlarm({
        isFalseAlarm,
        handleDesc,
        id,
      });
      tableRef.value.refresh();
    },
    defaultValue: {
      ...record,
    },
  });
};

// 处理弹窗
const item = computed<BoFormProps['columns']>(() => [
  {
    title: '是否误报',
    dataIndex: 'isFalseAlarm',
    valueType: 'radio',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请选择是否误报',
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: '请选择是否误报',
      options: falseAlarmOptions.value,
    },
  },
  {
    title: '处理结果',
    dataIndex: 'handleDesc',
    valueType: 'textarea',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入处理结果',
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: '请输入处理结果',
      rows: 2,
      maxLength: 100,
      showCount: true,
    },
  },
]);

const { FormModal, open } = useFormModal({
  size: 'small',
  column: 1,
});
</script>

<style lang="scss" scoped></style>
